<!--
 * @Author: xiawei 1243162387@qq.com
 * @Date: 2024-04-27 21:32:31
 * @LastEditors: xiawei 1243162387@qq.com
 * @LastEditTime: 2024-05-20 18:20:50
-->
<template>
    <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="案例" name="first">
            <el-scrollbar>
                <!-- 普通上传 -->
                <ExamplePanel file="upload1.text" desc="通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置 limit，限制文件上传个数，v-model实现文件双向绑定（[]）,accept实现文件上传类型限制。" title="案例1-基础文件上传">
                    <template v-slot:example>
                        <div style="height: 250px;overflow-y: auto;">
                            <Upload1></Upload1>
                        </div>
                    </template>
                </ExamplePanel>
                <!-- 手动上传 -->
                <ExamplePanel file="upload2.text" desc="通过配置autoUpload: false,外部组件通过调用上传组件实例的方法：submit实现手动上传,配置 all-upload方法(一般用于所有文件上传后，用户自定义的回调；列如：文件成功上传后表单其他数据提交)" title="案例2-手动文件上传">
                    <template v-slot:example>
                        <div style="height: 200px;overflow-y: auto;">
                            <Upload2></Upload2>
                        </div>
                    </template>
                </ExamplePanel>
            </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="文档" name="second">
            <Document></Document>
        </el-tab-pane>
    </el-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import ExamplePanel from '@/pages/components/ExamplePanel.vue'
import Document from './components/Document.vue'
import Upload1 from './components/Upload1/index.vue'
import Upload2 from './components/Upload2/index.vue'
const activeName = ref('first')
</script>